﻿@page "/heatmap-chart/bubble-types"

@using Syncfusion.Blazor.HeatMap
@using Syncfusion.Blazor.DropDowns
@using SFHeatMap = Syncfusion.Blazor.HeatMap
@using sf_blazor_heatmapdata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the female participation rate of the total female population in the country’s work force. In Bubble Heatmap, the data points can be visualized using Bubble Size, Bubble Shade and Sector view types.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to display the data points in Bubble Heatmap using multiple views such as Bubble Size, Bubble Shade and the Sector. You can change the cell type to Bubble by using the <code>TileType</code> property in <code>CellSettings</code>, and you can change the view of the Bubble Heatmap by using the <code>BubbleType</code> property in <code>CellSettings</code>.</p>
   <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="col-lg-8 control-section">
    <div class="control-section">
            <SfHeatMap DataSource="@DataSource">
                <HeatMapTitleSettings Text="Female Participation Rate in Labor Force for the Countries"></HeatMapTitleSettings>
                <HeatMapXAxis Labels="@XLabels"
                              LabelRotation="45"
                              LabelIntersectAction="@SFHeatMap.LabelIntersectAction.None">
                    <HeatMapXAxisTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapXAxisTextStyle>
                </HeatMapXAxis>
                <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
                <HeatMapPaletteSettings>
                    <HeatMapPalettes>
                        <HeatMapPalette Value="35" Color="#50A3B1"></HeatMapPalette>
                        <HeatMapPalette Value="45" Color="#78D1BD"></HeatMapPalette>
                        <HeatMapPalette Value="55" Color="#CAE8B4"></HeatMapPalette>
                        <HeatMapPalette Value="65" Color="#EDF8B6"></HeatMapPalette>
                        <HeatMapPalette Value="78" Color="#FFFFDA"></HeatMapPalette>
                    </HeatMapPalettes>
                </HeatMapPaletteSettings>
                <HeatMapCellSettings ShowLabel="false"
                                     TileType="@SFHeatMap.CellType.Bubble"
                                     BubbleType="@bubbleType">
                    <HeatMapCellBorder Width = "1" ></HeatMapCellBorder>
                </HeatMapCellSettings>
                <HeatMapLegendSettings Visible="true"></HeatMapLegendSettings>
            </SfHeatMap>
            <div style="float: right; margin-right: 10px;">
                Source:
                <a href="https://data.worldbank.org" target='_blank'>https://data.worldbank.org/</a>
            </div>
        </div>
    </div>
<div class="col-lg-4 property-section">
    <div><h5>Bubble Type</h5></div>
    <SfDropDownList TValue="string" TItem="DataModel" PopupHeight="230px" @bind-Index="@index" Placeholder="select Type" DataSource="@Bubble">
        <DropDownListFieldSettings Value="Id" Text="Text"></DropDownListFieldSettings>
        <DropDownListEvents TItem="DataModel" TValue="string" ValueChange="@(e => { Enum.TryParse<SFHeatMap.BubbleType>(e.Value, out bubbleType); })"></DropDownListEvents>
    </SfDropDownList>
</div>

@code{
    private int? index { get; set; } = 0;
    SFHeatMap.BubbleType bubbleType;
    string[] XLabels = new string[] { "Singapore", "Spain", "Australia", "Germany", "Belgium", "USA", "France", "UK" };
    string[] YLabels = new string[] { "1995", "2000", "2005", "2010", "2015" };
    double[,] DataSource = HeatMapData.TableBubbleData();
    List<DataModel> Bubble = new List<DataModel>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        Bubble.Add(new DataModel { Id = "0", Text = "Size" });
        Bubble.Add(new DataModel { Id = "1", Text = "Color" });
        Bubble.Add(new DataModel { Id = "2", Text = "Sector" });
    }
    class DataModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}